<template>
    <div class="container">
        <div class="info">
            <div style="height: 10px;"></div>
            <!-- <div style="width: 90%;margin-left: 5%;">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <div style="width: 65px;">邮箱</div>
                        <div style="width: 15px;"></div>
                        <div class="line-vertical"></div>
                        <div style="width: 10px;"></div>
                        <div>{{ email }}</div>
                    </div>
                </div>
            </div>
            <div style="height: 30px;"></div>
            <div style="width: 90%;margin-left: 5%;">
                    <div class="flex-image" style="display: flex;align-items: center;justify-content: space-between;">
                        <div style="display: flex;align-items: center;">
                        <div style="width: 65px;">验证码</div>
                        <div style="width: 15px;"></div>
                        <div class="line-vertical"></div>
                        <div style="width: 10px;"></div>
                        <input type="text" v-model="code" placeholder="请输入验证码">
                        </div>
                        <div @click="getEmail">获取</div>
                    </div>
            </div>
            <div style="height: 30px;"></div> -->
            <div class="card">
                <div style="width: 90%;margin-left: 5%;">
                    <div style="height: 10px;"></div>
                    <div style="font-size: 18px;font-weight: 500;">修改密码</div>
                    <div style="height: 10px;"></div>
                    <u-line color="#f1f1f1"></u-line>
                    <div style="height: 10px;"></div>
                    <div>
                        <div>新密码</div>
                        <div style="height: 15rpx;"></div>
                        <div class="borders">
                            <div style="width: 90%;margin-left: 5%;">
                                <!-- <div class="flex-image"
                                    style="display: flex;align-items: center;justify-content: space-between;"> -->
                                <!-- <div style="display: flex;align-items: center;"> -->
                                <input v-model="newPassword" :type="flag ? 'password' : 'text'" placeholder="请输入新密码">
                                <!-- </div> -->
                                <!-- <div>
                                        <u-icon @click="flag = true" size="20px" v-if="!flag && newPassword != ''"
                                            name="eye-fill"></u-icon>
                                        <u-icon @click="flag = false" size="20px" v-if="flag && newPassword != ''"
                                            name="eye-off"></u-icon>
                                    </div> -->
                                <!-- </div> -->
                            </div>

                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div>
                        <div>确认密码</div>
                        <div style="height: 15rpx;"></div>
                        <div class="borders">
                            <!-- <div class="flex-image"
                                style="display: flex;align-items: center;justify-content: space-between;"> -->
                            <!-- <div style="display: flex;align-items: center;"> -->
                            <input v-model="newPasswordMore" :type="flags ? 'password' : 'text'" placeholder="请确认新密码">
                            <!-- </div> -->
                            <!-- <div>
                                    <u-icon @click="flags = true" size="20px" v-if="!flags && newPasswordMore != ''"
                                        name="eye-fill"></u-icon>
                                    <u-icon @click="flags = false" size="20px" v-if="flags && newPasswordMore != ''"
                                        name="eye-off"></u-icon>
                                </div> -->
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
                <div style="height: 20px;"></div>
                <view class="yesChange" @click="yesEdit">确认修改</view>
                <div style="height: 30px;"></div>
            </div>
            <!-- <div style="width: 90%;margin-left: 5%;">
                <div class="flex-image" style="display: flex;align-items: center;justify-content: space-between;">
                    <div style="display: flex;align-items: center;">
                        <div style="width: 65px;">新密码</div>
                        <div style="width: 15px;"></div>
                        <div class="line-vertical"></div>
                        <div style="width: 10px;"></div>
                        <input v-model="newPassword" :type="flag ? 'password' : 'text'" placeholder="请输入新密码">
                    </div>
                    <div>
                        <u-icon @click="flag = true" size="20px" v-if="!flag && newPassword != ''"
                            name="eye-fill"></u-icon>
                        <u-icon @click="flag = false" size="20px" v-if="flag && newPassword != ''"
                            name="eye-off"></u-icon>
                    </div>
                </div>
            </div>
            <div style="height: 30px;"></div>
            <div style="width: 90%;margin-left: 5%;">
                <div class="flex-image" style="display: flex;align-items: center;justify-content: space-between;">
                    <div style="display: flex;align-items: center;">
                        <div style="width: 65px;">确认密码</div>
                        <div style="width: 15px;"></div>
                        <div class="line-vertical"></div>
                        <div style="width: 10px;"></div>
                        <input v-model="newPasswordMore" :type="flags ? 'password' : 'text'" placeholder="请确认新密码">
                    </div>
                    <div>
                        <u-icon @click="flags = true" size="20px" v-if="!flags && newPasswordMore != ''"
                            name="eye-fill"></u-icon>
                        <u-icon @click="flags = false" size="20px" v-if="flags && newPasswordMore != ''"
                            name="eye-off"></u-icon>
                    </div>
                </div>
            </div> -->

        </div>
    </div>
</template>
<script>
import { editPass, logOut} from '../../common/example';
import { sendEmail, ruleEmail,resetPwd  } from '../api/api';
export default {
    data() {
        return {
            flag: false,
            flags: false,
            newPassword: '',
            newPasswordMore: '',
            email: '',
            code: '',
            role:''
        }
    },
    methods: {
        clearForm() {
            this.code = '';
            this.newPassword = '';
            this.newPasswordMore = '';
        },
        // 获取邮箱验证吗
        getEmail() {
            sendEmail(this.email).then(res => {
                console.log(res.data, 'res.data');
            })
        },
        // 修改密码
        yesEdit() {
            // 

            if (!this.newPasswordMore || !this.newPassword) {
                uni.showToast({
                    title: '请输入完整',
                    icon: 'none'
                })
            } else if (this.newPasswordMore != this.newPassword) {
                uni.showToast({
                    title: '两次输入密码不一致',
                    icon: 'none'
                })
            } else {
                resetPwd({
                    role:this.role == '司机'?'driver':this.tole == '调度员'?'dispatcher':this.role == '养殖场账号'?'farmer':'treatment-operator',
                    userId: uni.getStorageSync('userInfo').userId,
                    password: this.newPasswordMore,
                }).then(res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: '修改成功,请重新登录',
                            icon: 'none'
                        })
                        logOut().then(res => {
                            console.log(res.data);
                            if (res.data.code == 200) {
                                setTimeout(() => {

                                    uni.reLaunch({
                                        url: '/pages/index/index'
                                    })
                                    this.clearForm();
                                    uni.clearStorageSync();

                                }, 1000)
                            }
                        })
                    } else {
                        uni.showToast({
                            title: '修改失败',
                            icon: 'none'
                        })
                    }
                })

            }
            // 


            // 

        }
    },
    onLoad() {
        // uni.hideHomeButton();
    },
    onShow() {

        this.role = uni.getStorageSync('userInfo').remark;
    }

}
</script>
<style lang="scss">
.container {
    height: 100vh;
    width: 100vw;
    background: #f3f3f3;
    color: #000000;
}

.head-img image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}

.flex-image image {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
}

.line-white {
    height: 4rpx;
    width: 90vw;
    background: #fff;
}

.line-vertical {
    width: 3rpx;
    height: 40rpx;
    background: #5F9F6A;
}

.yesChange {
    background: #000000;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin-left: 5%;
    height: 45px;
}

.card {
    background: #fff;
    border-radius: 10px;
    width: 90%;
    margin-left: 5%;
}

.newFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

input {
    height: 42px;
}

.borders {
    border: 1px solid #000000;
    border-radius: 5px;
    text-align: center;
}
</style>